<template>
  <el-drawer title="优惠券详情" size="60%" :visible.sync="isShowDrawer">
    <div class="detail_header">
      <div class="sp_bew">
        <div class="left">
          <div class="title_wrap">
            <div>
              <span class="title">{{ detail.couponsName }}</span>
              <span class="status">{{
                detail.couponsStatus == "1" ? "已启用" : "禁用"
              }}</span>
            </div>
            <div class="placeholder9 mt10">{{ detail.disRule }}</div>
          </div>
        </div>
        <div class="right">
          <div class="item">
            <div class="key">领取量/发放量</div>
            <div class="value">
              {{ detail.getNum }}/{{ detail.circulation }}
            </div>
          </div>
          <div class="item">
            <div class="key">已使用</div>
            <div class="value">{{ detail.useNum }}</div>
          </div>
          <div class="item">
            <div class="key df_ac">
              <span>领取率</span>
              <el-tooltip
                effect="dark"
                content="领取率=领取张数/发行总张数"
                placement="bottom"
              >
                <img
                  style="width: 14px"
                  src="@/assets/icon/question.png"
                  alt=""
                >
              </el-tooltip>
            </div>
            <div v-if="detail.circulation != '0'" class="value">
              {{ toFixed((detail.getNum / detail.circulation) * 100) }}%
            </div>
          </div>
          <div class="item">
            <div class="key df_ac">
              <span>使用率</span>
              <el-tooltip
                effect="dark"
                content="使用率=使用张数/领取张数"
                placement="bottom"
              >
                <img
                  style="width: 14px"
                  src="@/assets/icon/question.png"
                  alt=""
                >
              </el-tooltip>
            </div>
            <div v-if="detail.getNum != '0'" class="value">
              {{ toFixed((detail.useNum / detail.getNum) * 100) }}%
            </div>
            <div v-else class="value">0.00%</div>
          </div>
        </div>
      </div>
      <div class="df_sb">
        <div
          v-if="meta.indexOf('CouponGetRecordExport') > 0"
          class="download"
          @click="Download"
        >
          领用记录下载
        </div>
        <div class="createTime_wrap">
          <span class="item">创建时间：{{ detail.createTime }}</span>
          <span class="item">创建人：{{ detail.createName }}</span>
        </div>
      </div>
    </div>
    <div class="separate" />
    <div class="property-title">优惠券属性</div>
    <div class="line">
      <div class="key">优惠券名称：</div>
      <div class="value">{{ detail.couponsName }}</div>
    </div>
    <div class="line">
      <div class="key">优惠券类型：</div>
      <div class="value">
        {{ detail.couponsType == "0" ? "折扣券" : "代金券" }}
      </div>
    </div>
    <div class="line">
      <div class="key">优惠规则：</div>
      <div class="value">{{ detail.disRule }}</div>
    </div>
    <div class="line">
      <div class="key">使用说明：</div>
      <div class="value">
        <div>{{ detail.useDes }}</div>
      </div>
    </div>

    <div class="property-title">时间设置</div>
    <div class="line">
      <div class="key">限领时间：</div>
      <div class="value">
        {{ detail.receiveStartTime || "" }} 至 {{ detail.receiveEndTime || "" }}
      </div>
    </div>
    <div class="line">
      <div class="key">可用时间：</div>
      <div v-if="detail.validityType == '0'" class="value">
        {{ detail.validityStartTime }} 至 {{ detail.validityEndTime }}
      </div>
      <div v-if="detail.validityType == '1'" class="value">
        {{ detail.validityDays }} 天
      </div>
    </div>
    <div class="line">
      <div class="key">时间段限制：</div>
      <div class="value">{{ detail.useTimeInfo }}</div>
    </div>

    <div class="property-title">发放规则</div>
    <div class="line">
      <div class="key">发行数量：</div>
      <div class="value">{{ detail.circulation }}</div>
    </div>
    <div class="line">
      <div class="key">发放渠道：</div>
      <div class="value">
        {{
          detail.couponsChannel == "1"
            ? "用户领取"
            : detail.couponsChannel == "3"
              ? "定向营销"
              : "积分兑换"
        }}
      </div>
    </div>
    <div class="line">
      <div class="key">每人限领数量：</div>
      <div v-if="!detail.peoLimit" class="value">不限制</div>
      <div v-else class="value">
        {{ typeMap[detail.restrictType] }}限领{{ detail.peoLimit || "" }}张
      </div>
    </div>

    <div class="property-title">适用规则</div>
    <div class="line">
      <div class="key">支付方式：</div>
      <div class="value">{{ detail.payMethodInfo }}</div>
    </div>
    <div class="line">
      <div class="key">订单类型：</div>
      <div class="value">{{ detail.orderTypeInfo }}</div>
    </div>
    <div class="line">
      <div class="key">适用场馆：</div>
      <div class="value">{{ detail.stadiumInfo }}</div>
    </div>
    <div class="line">
      <div class="key">适用项目：</div>
      <div class="value">{{ detail.useProject }}</div>
    </div>
  </el-drawer>
</template>

<script>
import {
  couponsDetail,
  couponDownload
} from '@/api'
export default {
  name: 'ComboAdd',
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShowDrawer: false,
      detail: {},
      typeMap: {
        '0': '每天',
        '1': '每周',
        '2': '每月',
        '3': '整个活动'
      }
    }
  },
  created() {

  },
  methods: {
    // 获取优惠券详情
    getCouponDetailInfo(couponsId, row) {
      couponsDetail({
        param: { couponsId },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.detail = { ...row, ...res.record }
        })
    },
    Download() {
      couponDownload({
        param: {
          couponsId: this.detail.couponsId
        }
      }).then(res => {
        if (res.errorCode !== '000000') return
        const elink = document.createElement('a')
        elink.style.display = 'none'
        elink.href = res.record.showUrl
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      })
    },
    toFixed(num) {
      return num.toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.line {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  padding-left: 16px;
  .key {
    color: #666666;
    width: 100px;
    text-align: right;
  }
  .value {
    color: #222222;
  }
}
.detail_header {
  font-size: 14px;
  .sp_bew {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }
      .title {
        font-size: 18px;
        font-weight: 600;
        color: #222222;
      }
      .status {
        border-radius: 2px;
        border: 1px solid $primaryColor;
        color: $primaryColor;
        margin-left: 10px;
      }
    }
    .right {
      display: flex;
      background-color: #f4f7fc;
      border-radius: 2px;
      .item {
        padding: 14px 20px;
        margin-right: 30px;
        .key {
          font-size: 12px;
          color: #666666;
        }
        .value {
          margin-top: 8px;
          color: #222222;
          font-weight: 600;
        }
      }
    }
  }
  .download {
    padding: 8px 16px;
    border: 1px solid #e0e2e7;
    border-radius: 2px;
    cursor: pointer;
  }
  .createTime_wrap {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;
    .item {
      margin-left: 30px;
      color: #999999;
    }
  }
}
.separate {
  height: 1px;
  margin: 20px -20px;
  padding: 0 20px;
  background-color: #dfe2e8;
}
.tip {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;

  &:hover {
    border-color: $menuActive;

    .uploader-icon {
      color: $menuActive;
    }
  }

  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;

        .icon {
          color: #fff;
        }
      }

      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }

  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.count-style {
  display: inline-block;
  width: 45%;
  height: 60px;
}

.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 50px;
}

.clock {
  display: inline-block;
}

.upload-style {
  vertical-align: middle;
  display: inline-block;
  // width: 60px;
  // height: 60px;
  border: none;
}

.img-style {
  margin: auto;
  background-color: #eee;
  width: 100px;
  height: 60px;
  vertical-align: middle;
}

.avatar {
  width: 60px;
  height: 60px;
  display: block;
}

.line-style {
  background-color: #dfe2e8;
  height: 1px;
  // width: 80%;
  // margin: 0 auto;
  margin-bottom: 20px;
}
</style>
